<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <!--[if !IE 7]>
	<style type="text/css">
		#main-content {display:table;height:100%}
	</style>
    <![endif]-->
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
    <div class="master-row">
        <div class="content-pane main-content">
    <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
            <li class="name"><!-- Leave this empty --></li>
            <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
        </ul>
        <section class="top-bar-section">
            <ul class="left">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Research</a></a></li>
                <li><a href="#">CV</a></a></li>
                <li><a href="#">Software</a></a></li>
                <li><a href="#">Contact</a></a></li>
            </ul>
            <ul class="right">
                <li><a href="#">News</a></a></li>
            </ul>

        </section>
    </nav>
    <div class="row title-bar">
        <div class="small-12 columns">
            <h1><a href="#">Chris MacMackin</a></h1><h2> <small>DPhil Student in Atmospheric, Ocean, and Planetary Physics</small></h2>
            <hr>
        </div>
    </div>
    
    <div class="row">
        <div class="small-12 columns">
            <p>This that the other thing. This that the other thing. 
               This that the other thing. This that the other thing.</p>
            <p>This that the other thing.</p>
            <p>This that the other thing. <em>This should be italic.</em>
               This that the other thing. <a href="http://en.wikipedia.org/wiki/Main_Page">Wikipedia</a>
               This that the other thing. This that the other thing.</p>
            <p>This that the other thing. <strong>This should be bold.</strong></p>
            <p>This that the other thing.</p>
        </div>
    </div>
    <footer class="show-for-large-up">
            <div class="row">
            <div class="small-6 medium-3 columns">
                    <ul class="left-nav">
                        <li><a href="#">Home <i class="fa fa-home fa-fw"></i></a></li>
                        <li><a href="#">Categories &nbsp;<i class="fa fa-folder-open fa-fw"></i></a></li>
                    </ul>
            </div>
            <div class="small-6 medium-3 medium-push-6 columns">
                    <ul class="right-nav">
                        <li><a href="#"><i class="fa fa-rss fa-fw"></i>&nbsp;Feed</a></li>
                        <li><a href="#"><i class="fa fa-archive fa-fw"></i>&nbsp;Archives</a></li>
                    </ul>
            </div>
            <div class="small-12 medium-6 medium-pull-3 columns text-center">
                <p class="tag-cloud"><a href="#"><i class="fa fa-tags"></i>&nbsp;Tags: </a>
                <span class="label"><a href="#">Writing</a></span>
                <a href="#"><span class="label">Brazil</span></a>
                <span class="label">Linux</span>
                <span class="label">Programming</span>
                <span class="label">Socialism</span>
                <span class="label">Mathematical Models</span>
                <span class="label">gfortran</span>
                <span class="label">Blogging</span>
                <span class="label">Thoughts</span>
                <span class="label">Nuclear Power</span>
                <span class="label">Mathematics</span>
                <span class="label">Guards! Guards!</span>
                <span class="label">Canada Post</span>&nbsp;&hellip;
                </p>
            </div>
        <div class="small-12 columns sub-footer">
            <hr>
            <div class="small-12 medium-6 columns">
                <p class="small-text-center medium-text-left">&copy; 2015 Chris MacMackin 
                <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="cc.png" /></a></p>
            </div>
            <div class="small-12 medium-6 columns">
                <p class="small-text-center medium-text-right">Proudly powered by 
                <a href="http://blog.getpelican.com/">Pelican</a>,
                which takes great advantage of
                <a href="https://www.python.org/">Python</a>.</p>
            </div>
        </div>
        </div>
    </footer>
        </div>
        <div class="image-pane main-content" style="background: url('oxford.jpg'); background-size:cover; background-position: center;">
            <div class="row">
                <div class="small-12 medium-6 medium-push-3 large-reset-order large-12 columns">
                    <div class="panel transparent" id="about-me"><div class="row">
                        <div class="show-for-medium-up medium-3 columns no-buffer"><a class="th" href="gradChoice.jpg">
                        <img src="gradChoice.jpg">
                        </a></div>
                        <div class="small-12 medium-9 columns">
                            This is a blurb about me. I'm a student studying
                            physics. You may know me. You may not. Whatever. This
                            that the other thing. This that the other thing.
                        </div>
                        <div class="small-12 columns">
                            <ul class="link-list">
                                <li><a href="#"><i class="fa fa-envelope"></i>&nbsp; Email</a></li>
                                <li><a href="#"><i class="fa fa-github"></i>&nbsp; GitHub</a></li>

                            </ul>
                        </div>
                    </div></div>
                </div>
                <div class="small-12 medium-3 medium-pull-9 large-reset-order large-12 columns">
                    <ul class="blogroll">
                        <li class="heading">What I've been reading&hellip;</li>
                        <li><a href="#">Button</a></li>
                        <li><a href="#">New Button</a></li>
                        <li><a href="#">Third Button</a></li>
                        <li><a href="#">Button 4</a></li>
                    </ul>
                </div>
<!--
                <div class="small-12 medium-3 large-12 columns">
                    <div class="small-6 medium-12 large-6 small-centered columns">
                        <a class="th" href="http://www.ox.ac.uk/"><img src="oxford.png"></a>
                    </div>
                </div>
-->
           </div>
        </div>
    </div>
        <div class="row"><footer class="hide-for-large-up">
            <div class="row">
            <div class="small-6 medium-3 columns">
                    <ul class="left-nav">
                        <li><a href="#">Home <i class="fa fa-home fa-fw"></i></a></li>
                        <li><a href="#">Categories &nbsp;<i class="fa fa-folder-open fa-fw"></i></a></li>
                    </ul>
            </div>
            <div class="small-6 medium-3 medium-push-6 columns">
                    <ul class="right-nav">
                        <li><a href="#"><i class="fa fa-rss fa-fw"></i>&nbsp;Feed</a></li>
                        <li><a href="#"><i class="fa fa-archive fa-fw"></i>&nbsp;Archives</a></li>
                    </ul>
            </div>
            <div class="small-12 medium-6 medium-pull-3 columns text-center">
                <p class="tag-cloud"><a href="#"><i class="fa fa-tags"></i>&nbsp;Tags: </a>
                <span class="label">Writing</span>
                <span class="label">Brazil</span>
                <span class="label">Linux</span>
                <span class="label">Programming</span>
                <span class="label">Socialism</span>
                <span class="label">Mathematical Models</span>
                <span class="label">gfortran</span>
                <span class="label">Blogging</span>
                <span class="label">Thoughts</span>
                <span class="label">Nuclear Power</span>
                <span class="label">Mathematics</span>
                <span class="label">Guards! Guards!</span>
                <span class="label">Canada Post</span>&nbsp;&hellip;
                </p>
            </div>
        <div class="small-12 columns sub-footer">
            <hr>
            <div class="small-12 medium-6 columns">
                <p class="small-text-center medium-text-left">&copy; 2015 Chris MacMackin 
                <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="cc.png" /></a></p>
            </div>
            <div class="small-12 medium-6 columns">
                <p class="small-text-center medium-text-right">Proudly powered by 
                <a href="http://blog.getpelican.com/">Pelican</a>,
                which takes great advantage of
                <a href="https://www.python.org/">Python</a>.</p>
            </div>
        </div>
        </div>
        </footer></div>
   <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>
